<template>
	<view class="app">
		<tn-nav-bar  :alpha="true">订单支付</tn-nav-bar>
		<view class="price-box" :style="{paddingTop: vuex_custom_bar_height+ 28+ 'px'}">
			<text>支付金额</text>
			<text class="price">{{(orderInfo.pay_money-discount_money).toFixed(2) || 0}}</text>
		</view>

		<view class="pay-type-list">

			<view class="type-item b-b" @click="changePayType(1)">
				<text class="icon yticon tn-icon-payment-wechat"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<!-- <image class="checkBtn"
					:src="payType == 1?'/static/selected.png':'/static/select.png'" 
					mode="aspectFit" />
					</image> -->
					<radio value="" color="#fa436a" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			
			<view class="type-item" @click="changePayType(2)">
				<text class="icon yticon icon-erjiye-yucunkuan tn-icon-money"></text>
				<view class="con">
					<text class="tit">预存款支付</text>
					<text>可用余额 ¥{{user.money}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 2' />
					</radio>
				</label>
			</view>
			
			<view class="type-item">
				<text class="icon yticon icon-erjiye-yucunkuan tn-icon-coupon"></text>
				<view class="con">
					<text class="tit">使用优惠券</text>
					<text>可用数量: {{couponList.length}}</text>
				</view>
				<view class="con">
					  <text @tap="showCoupon" v-if="!show">{{couponMessage}}</text>
					  <tn-picker @confirm="selectCoupon" mode="selector" v-model="show" :defaultSelector="[0]" :range="couponList" rangeKey="name">></tn-picker>
				</view>
			</view>
		</view>
		
		<text class="mix-btn" @click="confirm">确认支付</text>
		
		<TemplateLoading :active="loading"></TemplateLoading>
	</view>
</template>

<script>
	import {orderDetail,info} from '@/api/user/index.js'
	import {prePay,accountPay,canUsedCoupon} from '@/api/order/order.js'
	import TemplateLoading from '../../components/loading.vue'
	export default {
		components:{TemplateLoading},
		data() {
			return {
				couponMessage:"请选择优惠券",
				couponList:[],
				loading:false,
				receive_coupon_id:0,
				payType: 1,
				orderInfo: {},
				order_sn:"",
				user:{},
				show:false,
				discount_money:0
			};
		},
		computed: {
		
		},
		onLoad(options) {
			this.order_sn = options.order_sn;
			this.initData()
		},

		methods: {
			selectCoupon(e){
				this.discount_money = this.couponList[e].discount_money || 0
				this.couponMessage = this.couponList[e].name + "(-"+this.discount_money+")"
				this.receive_coupon_id = this.couponList[e].id
			},
			showCoupon(){
				this.show = true
			},
			initData(){
				orderDetail({order_sn:this.order_sn}).then(res=>{
					this.orderInfo = res
				})
				
				info().then(res=>{
					this.user = res
				})
				
				canUsedCoupon({order_sn:this.order_sn}).then(res=>{
					this.couponList = res
				})
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
			},
			//确认支付
			confirm: async function() {
				/* uni.redirectTo({
					url: '/pages/money/paySuccess'
				}) */
				
				if(this.payType==1){
					this.wxPay();
				}
				if(this.payType==2){
					this.accountPay();
				}
			},
			wxPay(){
				prePay({order_sn:this.order_sn,receive_coupon_id:this.receive_coupon_id}).then(re=>{
					uni.requestPayment({
					    provider: "wxpay",
					    appId: re.appid,  // 微信开放平台 - 应用 - AppId，注意和微信小程序、公众号 AppId 可能不一致
					    nonceStr: re.nonceStr, // 随机字符串
					    package: re.package,        // 固定值
					    // "partnerid": re.partnerid,      // 微信支付商户号
					    // "prepayid":re.prepayid, // 统一下单订单号
					    timeStamp: re.timeStamp,        // 时间戳（单位：秒）
						paySign:re.paySign,
					    signType: re.signType, // 签名，这里用的 MD5/RSA 签名
					    success(res) {
							uni.showModal({
								//title: '提示',
								content: '订单支付已成功',
								success: function (res) {
								},
								complete:function(){
									uni.navigateTo({
									  url: '/pages/order/pay/paySuccess'
									})
								}
							});
						},
					    fail(e) {
							console.log(e)
							uni.showToast({
								title: '支付已取消',
								duration: 3000,
								icon:"none"	
							})
						}
					})
				},err=>{
					// uni.navigateTo({
					//   url: '/pages/index/index?index=2'
					// })
				})
			},
			accountPay(){
				if(this.user.money*1 < this.orderInfo.pay_money*1){
					uni.showToast({
						title: '余额不足，请预先充值！',
						duration: 3000,
						icon:"none"	
					})
					
					return false
				}
				
				this.loading = true
				accountPay({order_sn:this.order_sn,receive_coupon_id:this.receive_coupon_id}).then(res=>{
					this.loading = false
					uni.navigateTo({
					  url: '/pages/order/pay/paySuccess'
					})
				},err=>{
					console.log(err)
					this.loading = false
				})
			}
		}
	}
</script>

<style lang='scss'>
	.checkBtn{width: 50rpx;height: 50rpx;}
	
	.app {
		width: 100%;
	}

	.price-box {
		background-color: #fff;
		height: 265rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #909399;

		.price{
			font-size: 50rpx;
			color: #303133;
			margin-top: 12rpx;
			&:before{
				content: '￥';
				font-size: 40rpx;
			}
		}
	}

	.pay-type-list {
		margin-top: 20rpx;
		background-color: #fff;
		padding-left: 60rpx;
		
		.type-item{
			height: 120rpx;
			padding: 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60rpx;
			font-size: 30rpx;
			position:relative;
		}
		
		.icon{
			width: 100rpx;
			font-size: 52rpx;
			color: #36cb59;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: 12px;
			color: #666;
			margin-bottom: 4rpx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: 12px;
			color: $tn-main-orange;
		}
	}
	.mix-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 630rpx;
		height: 80rpx;
		margin: 80rpx auto 30rpx;
		font-size: 12px;
		color: #fff;
		background-color:  $tn-main-orange;
		border-radius: 10rpx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}

</style>
